<template>
  <div class="blog-container">

    <el-form ref="form" v-model="selectCondition">
      <el-row>
        <el-input v-model="selectCondition.title" placeholder="请输入博客标题" />
        <el-input v-model="selectCondition.type" placeholder="请输入分类名" />
        <el-input v-model="selectCondition.label" placeholder="请输入标签名" />
        <el-input v-model="selectCondition.recommendLevel" placeholder="推荐等级" />
        <el-input v-model="selectCondition.status" placeholder="是否发布" />
        <el-input v-model="selectCondition.isCreate" placeholder="是否原创" />
        <el-button type="primary" @click="search(selectCondition)">查找</el-button>
        <el-button type="primary" @click="addBlogVisualable()">添加博客</el-button>
        <el-button type="danger" @click="delSelect()">删除选中</el-button>
      </el-row>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;margin-top:14px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" width="50" align="center" />
      <el-table-column v-if="false" prop="id" />
      <el-table-column label="标题图" width="120">
        <template slot-scope="scope">
          <el-image
            style="width: 60px; height: 60px"
            :src="scope.row.titleImg"
            :preview-src-list="[scope.row.titleImg]"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="120" />
      <el-table-column prop="author" label="作者" width="120" />
      <el-table-column prop="isCreate" label="是否原创" width="120" />
      <el-table-column prop="type" label="分类" width="120" />
      <el-table-column prop="label" label="标签" width="120" />
      <el-table-column prop="recommendLevel" label="推荐等级" width="120" />
      <el-table-column prop="clickCount" label="点击数" width="120" />
      <el-table-column prop="createTime" label="创建时间" width="200" />
      <el-table-column prop="status" label="状态" width="120" />
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="delOne(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="pageQuery.pageNumber"
      :page-size="pageQuery.pageSize"
      background
      layout="total, prev, pager, next, jumper"
      :total="pageQuery.total"
      @current-change="handleCurrentChange"
    />
    <el-dialog title="博客添加" :visible.sync="editVisible" fullscreen>
      <el-form ref="form" v-model="blogForm">
        <el-row>
          标题图:
          <el-upload
            v-model="blogForm.titleImage"
            :label-width="formLabelWidth"
            action="https://imgkr.com/api/v2/files/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-row>
        <el-row>
          <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
            <el-input v-model="blogForm.title" auto-complete="off" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="简介" :label-width="formLabelWidth">
            <el-input v-model="blogForm.summary" auto-complete="off" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="分类" :label-width="formLabelWidth">
            <el-input v-model="blogForm.type" auto-complete="off" />
          </el-form-item>
          <el-form-item label="标签" :label-width="formLabelWidth">
            <el-input v-model="blogForm.label" auto-complete="off" />
          </el-form-item>
          <el-form-item label="推荐等级:" :label-width="formLabelWidth">
            <el-input v-model="blogForm.recommandLevel" auto-complete="off" />
          </el-form-item>
          <el-form-item label="是否发布:" :label-width="formLabelWidth">
            <el-input v-model="blogForm.status" auto-complete="off" />
          </el-form-item>
          <el-form-item label="是否原创:" :label-width="formLabelWidth">
            <el-input v-model="blogForm.isCreate" auto-complete="off" />
          </el-form-item>
        </el-row>
        <el-row>
          <mavon-editor v-model="blogForm.content" :toolbars="toolbars" :ishljs="true" />
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBlog(blogForm)">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { getBlogList, addBlog } from '@/api/blog'
export default {
  data() {
    return {
      formLabelWidth: '120px',
      dialogImageUrl: '',
      dialogVisible: false,
      editVisible: false,
      pageQuery: {
        pageNumber: 1,
        pageSize: 6,
        total: 0
      },
      selectCondition: {
        title: '',
        type: '',
        label: '',
        author: '',
        isCreate: '',
        recommendLevel: ''
      },
      blogForm: {
        titleImage: '',
        title: '',
        profile: '',
        type: '',
        label: '',
        recommandLevel: '',
        status: '',
        isCreate: ''
      },
      tableData: [],
      multipleSelection: [],
      content: '这里是markdown编辑的内容',
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      }
    }
  },
  created() {
    this.search(this.selectCondition)
  },
  methods: {
    search(condition) {
      condition.pageNumber = 1
      condition.pageSize = this.pageQuery.pageSize
      getBlogList(condition).then((response) => {
        this.tableData = response.records
        this.pageQuery.total = response.total
      }).catch(function(error) {
        console.log(error)
      })
    },
    pageSearch(condition) {
      condition.pageNumber = this.pageQuery.pageNumber
      condition.pageSize = this.pageQuery.pageSize
      getBlogList(condition).then((response) => {
        this.tableData = response.records
        this.pageQuery.total = response.total
      }).catch(function(error) {
        console.log(error)
      })
    },
    handleCurrentChange(index) {
      console.log(index)
      this.pageQuery.pageNumber = index
      this.pageSearch(this.selectCondition)
    },
    addBlogVisualable() {
      this.editVisible = true
      console.log('addBlog!')
    },
    addBlog(blogForm) {
      addBlog(blogForm).then((response) => {
        this.editVisible = false
        console.log(response)
      })
    },
    delSelect() {
      console.log('delSelect!')
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    edit(obj) {
      console.log(obj.id + obj.title + obj.author)
    },
    delOne(id) {
      console.log(id)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      console.log(file.url)
      this.dialogImageUrl = file.url
      console.log(file.response.data + 12314)
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .blog-container {
    margin: 14px;
  }

  .el-input {
    width: 12%;
    margin-right: 6px;
  }

  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }

  }
</style>
